<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #big{
            width: 700px;
            height: 50px;
            margin: 100px auto;
            border: 2px solid #000;
            position: relative;
        }
        #samll{
            height: 50px;
            background: cyan;
            border-radius: 4px;
            float: left;
        }
        #num {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
            left: 5px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="samll" style="width: 0px;"></div>
        <span id="num">0%</span>
    </div>

    <script>
        var timer = setInterval(function(){
            // 没执行一次定时器 进度条就在原来的宽度基础上+10
            var style = parseInt(samll.style.width);

            // 定义一个变量用原来的值 +每次增加的数
            var curStyle = style + 10
            // 当进度条到达max值时，就停止
            if(curStyle >= 700){
                curStyle = 700

                 // 清除定时器
                clearInterval(timer)
            }

            samll.style.width = curStyle + 'px';

            samll.style.left = curStyle + 2+ 'px';

            num.innerHTML = ((curStyle / 700) * 100).toFixed(2) + '%';
        },100)

    </script>
</body>
</html>